<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作Html元素属性(三)——HTML代码/文本的操作</title>
    <style type="text/css">
        .initDiv{
            display: block;
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery操作Html元素的HTML代码/文本</legend>
        <div class="initDiv" id="testDiv1">
            <p>我是div1</p>
        </div>
        <div class="initDiv" id="testDiv2">
            <span>我是div2</span>
        </div>
        <hr/>
        <button id="btnSetHtml">设置div的html内容</button>
        <button id="btnSetText">设置div的文本内容</button>
    </fieldset>

</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        console.log($('#testDiv1').html());//返回div元素的html内容
        console.log($('#testDiv2').html());//返回div元素的html内容
        console.log($('#testDiv1').text());//返回div元素的文本内容
        console.log($('#testDiv2').text());//返回div元素的文本内容

        $("#btnSetHtml").click(function () {
            $("#testDiv1").html("Hello <b>NYL</b>!");  //设置div元素的html内容，里面的HTML标签会被浏览器解析渲染
            $("#testDiv2").html("<h1>GACL LOVE YOU!</h1>");  //设置div元素的html内容，里面的HTML标签会被浏览器解析渲染
        });

        $("#btnSetText").click(function () {
            $("#testDiv1").text("Hello <b>NYL</b>!");  //设置div元素的文本内容，里面的HTML标签不会被浏览器解析渲染，只是当成字符串对待
            $("#testDiv2").text("<h1>GACL LOVE YOU!</h1>");  //设置div元素的文本内容，里面的HTML标签不会被浏览器解析渲染，只是当成字符串对待
        });
    });
    
</script>
</html>